<template>
  <div>
    <p class="title">新建活动</p>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
   <el-form-item label="活动编号：" prop="atyId" class="num">
    <el-input v-model="ruleForm.atyId"></el-input>
  </el-form-item>
  <div class="fromDiv">
  <el-form-item label="活动名称：" prop="atyName" class="num activeName">
    <el-input v-model="ruleForm.atyName"></el-input>
  </el-form-item>
  <el-form-item label="活动类型：" prop="atyType" class="num">
    <el-select v-model="ruleForm.atyType" placeholder="请选择活动类型">
      <el-option label="线上活动" value="1"></el-option>
      <el-option label="线下活动" value="2"></el-option>
    </el-select>
  </el-form-item>
  </div>
  <el-form-item label="报名时间：" required class="formDate">
    <el-col :span="11">
      <el-form-item prop="enrollStartTime">
        <el-date-picker type="datetime"  format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始日期时间" v-model="ruleForm.enrollStartTime" style="width: 100%;"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2">-----</el-col>
    <el-col :span="11">
      <el-form-item prop="enrollEndTime">
        <el-date-picker placeholder="选择结束日期时间"  format="yyyy-MM-dd HH:mm:ss" type="datetime" v-model="ruleForm.enrollEndTime" style="width: 100%;"></el-date-picker>
      </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item label="活动时间：" required class="formDate">
    <el-col :span="11">
      <el-form-item prop="atyStartTime">
        <el-date-picker  type="datetime"  format="yyyy-MM-dd HH:mm:ss"  placeholder="选择开始日期时间" v-model="ruleForm.atyStartTime" style="width: 100%;"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2">-----</el-col>
    <el-col :span="11">
      <el-form-item prop="atyEndTime">
        <el-date-picker   type="datetime"
      placeholder="选择结束日期时间"  v-model="ruleForm.atyEndTime" style="width: 100%;" format="yyyy-MM-dd HH:mm:ss"></el-date-picker>

       
      </el-form-item>
    </el-col>
  </el-form-item>
<!-- 数据规则需修改 -->
<div class="priceType">
  
       <el-form-item label="价格类型；" prop="priceType">
    <el-radio-group v-model="ruleForm.priceType">
      <el-radio label="1" >付费</el-radio>
      <el-radio label="2" >免费</el-radio>
    </el-radio-group>
  </el-form-item>
  <!-- 价格类型为付费时渲染活动价格节点 -->
    <el-form-item label="活动价格：" prop="price" class="num" v-if="ruleForm.priceType=='1'">
    <el-input v-model="ruleForm.price"></el-input>
  </el-form-item>

</div>
  

<!-- 数据规则需修改 -->
<div class="toupiao">
   <el-form-item label="是否用户投票:" prop="whetherVote">
    <el-radio-group v-model="ruleForm.whetherVote">
      <el-radio label="1" value="1">是</el-radio>
      <el-radio label="2" value="2">否</el-radio>
    </el-radio-group>
  </el-form-item>
 <!-- 用户投票类型为是时渲染 -->
   <el-form-item label="用户最大投票数/天：" prop="userMaxVote" class="num" label-width="200px" v-if="ruleForm.whetherVote=='1'">
    <el-input v-model="ruleForm.userMaxVote"></el-input>
  </el-form-item>
    <el-form-item label="用户最大投票数/人：" prop="worksMaxVote" class="num" label-width="200px" v-if="ruleForm.whetherVote=='1'">
    <el-input v-model="ruleForm.worksMaxVote"></el-input>
  </el-form-item>
</div>
<!--  -->
<div class="pingfen">
  <el-form-item label="是否评委打分：" prop="whetherGrade" label-width="121px">
    <el-radio-group v-model="ruleForm.whetherGrade">
      <el-radio label="1" value="1">是</el-radio>
      <el-radio label="2" value="2">否</el-radio>
    </el-radio-group>

  </el-form-item>
  <!-- 评委打分为是时显示 -->
  <el-form-item label="评委人数：" prop="starnum" class="num" label-width="200px" v-if="ruleForm.whetherGrade=='1'">
    <el-input v-model="ruleForm.whetherGradenum"></el-input>
  </el-form-item>
</div>
<!--  -->
  <el-form-item label="用户上传作品类型：" prop="worksType" label-width="150px">
    <el-radio-group v-model="ruleForm.worksType">
      <el-radio label="1" value="1">视频</el-radio>
      <el-radio label="2" value="2">图文</el-radio>
    </el-radio-group>
  </el-form-item>
  <!-- 钻石抵扣 -->
  <div class="zuanshi">
 
 <el-form-item label="是否设置钻石抵扣分：" prop="whetherDeduction" label-width="163px">
    <el-radio-group v-model="ruleForm.whetherDeduction">
      <el-radio label="1" value="1">是</el-radio>
      <el-radio label="2" value="2">否</el-radio>
    </el-radio-group>
  </el-form-item>
  <!-- 设置为是时显示 -->
  
  <el-form-item label="钻石抵扣数量" prop="deductionNumber" class="zs" label-width="200px" v-if="ruleForm.whetherDeduction=='1'">
    <el-input class="zsinput" v-model="ruleForm.deductionNumber" placeholder="1元/100钻石"></el-input>
    
  </el-form-item>
   <span style="color:#ccc" class="zsspan" v-if="ruleForm.whetherDeduction=='1'">抵扣金额：50元</span>
   
  </div>
 <el-form-item label="是否填写报名信息：" prop="userField" label-width="150px">
    <el-radio-group v-model="ruleForm.userField">
      <el-radio label="1" value="1"> 是</el-radio>
      <el-radio label="2" value="2">否</el-radio>
    </el-radio-group>
  </el-form-item>

 <el-form-item label="用户字段：" prop="userdec">
    <el-checkbox-group v-model="ruleForm.userdec">
      <el-checkbox label="全选" name="type"></el-checkbox>
      <el-checkbox label="姓名" name="type"></el-checkbox>
      <el-checkbox label="手机号" name="type"></el-checkbox>
      <el-checkbox label="身份证" name="type"></el-checkbox>
      <el-checkbox label="所在地" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>

<!-- 上传封面 -->
<el-form-item label="上传封面：">
<el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="cover" class="avatar" >
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<!--  -->

    <!-- <el-input type="textarea" v-model="ruleForm.desc"></el-input> -->
    <div>
      <p>活动介绍：</p>
       <RichText v-model="ruleForm.desc"/>
    </div>
   
    <!-- 、只有线下活动才会有活动现场； -->
<div class="line">
      <p>活动现场：</p>
      <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="图文" name="first">
           <RichText v-model="ruleForm.desc"/>
    </el-tab-pane>
    <el-tab-pane label="视频" name="second">
      <p>添加视频</p>
      <div>
           <span>视频描述：</span>
      <input type="text" name="" id="">
      </div>
   <div class="upvideo">
     <span>上传视频:</span>
      <el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
   </div>
    </el-tab-pane>
   
  </el-tabs>
    
    </div>

 <el-form-item label="状态：" prop="state" label-width="80px">
    <el-radio-group v-model="ruleForm.state">
      <el-radio label="1">上架</el-radio>
      <el-radio label="2">下架</el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item>
    <el-button type="primary"  @click="submitForm('ruleForm')">取消</el-button>
    <el-button type="primary" @click="resetForm('ruleForm')">保存</el-button>
  </el-form-item>
</el-form>
  </div>
</template>

<script>
import apis from "../../apis/modules/activityList";
import RichText from '../../components/RichText.vue'

export default {
  components: {
    RichText,
  },
      data() {
        // 活动表单数据
      return {
imageUrl:'',
activeName:'',
         
        
        ruleForm: {
          whetherGradenum:"",
           atyName: '',
         atyType: '',
          cover:'',
          atyId:'',
          enrollStartTime:'',
          enrollEndTime: '',
          atyStartTime: '',
          atyEndTime: '',
          priceType: '',
          whetherVote: '',
          userMaxVote: '',
          price:"",
          worksMaxVote: '',
          whetherGrade: '',
          worksType:'',
          whetherDeduction:'',
          deductionNumber:'',
          userField:"",
          starnum:"",
          intro:'222',
          atySceneContent:'22',
          userdec:[],
          desc:'',
          state:''
        },
        rules: {
          atyId: [
            { required: true, message: '请输入编号', trigger: 'blur' },
            // { min: 1, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          atyName: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            // { min: 1, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          atyType: [
            { required: true, message: '请选择活动类型', trigger: 'change' }
          ],
          enrollStartTime: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          enrollEndTime: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          atyStartTime: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          atyEndTime: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
           priceType:[
            { required: true, message: '请选择价格类型', trigger: 'change' }
          ],
           price: [
            { required: true, message: '请输入价格', trigger: 'blur' }
          ],
           userMaxVote: [
            { required: true, message: '请输入票数、人', trigger: 'blur' }
          ],
           worksMaxVote: [
            { required: true, message: '票数/天', trigger: 'blur' }
          ],
           whetherVote:[
            { required: true, message: '请选择用户是否投票', trigger: 'change' }
          ],
          userdec: [
            { type: 'array', required: true, message: '请至少选择一个', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          whetherGrade:[
            { required: true, message: '请选择评委是否打分', trigger: 'change' }
          ],
          worksType:[
            { required: true, message: '作品类型', trigger: 'change' }
          ],
          whetherDeduction:[
            { required: true, message: '钻石抵扣', trigger: 'change' }
          ],
          state:[
            { required: true, message: '状态', trigger: 'change' }
          ],
          userField:[
            { required: true, message: '报名信息', trigger: 'change' }
          ],
          deductionNumber:[
            { required: true, message: '请输入价格', trigger: 'blur' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }
      };
    },
    mounted(){

        this.ruleForm={...this.ruleForm,...this.$route.params.list}
        console.log(  this.ruleForm);
    },
    methods: {
     resetForm (formName) {
           
           this.atyStartTime=this.moment(this.ruleForm.atyStartTime).format('YYYY-MM-DD HH:mm:ss'),
           this.atyEndTime=this.moment(this.ruleForm.atyStartTime).format('YYYY-MM-DD HH:mm:ss'),
           this.enrollStartTime=this.moment(this.ruleForm.atyStartTime).format('YYYY-MM-DD HH:mm:ss'),
           this.enrollEndTime=this.moment(this.ruleForm.atyStartTime).format('YYYY-MM-DD HH:mm:ss'),
      // this.ruleForm.atyStartTime
         console.log( this.atyStartTime );
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');

          
        
            
            this.addactive(this.ruleForm)

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //新增活动
        async addactive(data){
          await apis.addactive(data).then(res=>{
            console.log(res);
          })
        },

      submitForm(formName) {
       console.log(formName);
        this.$refs[formName].resetFields();
      },
      // 上传图片
       handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
}
</script>

<style scoped  lang="scss">
.title{
  margin-top: -10px;
  font-size: 14px;
  margin-bottom: 20px;
}
.el-form{
  font-size: 14px;
}
.num{
  width: 300px;
}
 .fromDiv{
   display: flex;
 }
 .formDate{
   width: 500px;
 }
 .toupiao{
   display: flex;
 }
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .el-button{
    margin: 20px;
    width: 120px;
  }
  .priceType{
    display: flex;
  }
  .pingfen{
    display: flex;
  }
  .zuanshi{
    display: flex;
  }
  .zs{
    width: 320px;
   
  }
 .zsspan{
   /* float: right; */
  line-height: 40px;
  margin-left: 20px;
 }
 .upvideo{
   display: flex;
   margin-top: 20px;
 }
 
</style>